<template>
	<view class="goods">
		<block v-for="(item,index) in good" :key="index">
			<swiper  indicator-active-color="#fff" style="height: 750rpx;">
				<swiper-item>
					<view class="swiper-item">
						<image :src="item.IMAGE1" style="height: 750rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="p-2" >
				<view class="font-lg">{{item.NAME}}</view>
				<view class="font-lg main-text-color">{{item.PRESENT_PRICE}}</view>
			</view>
			
			<view class="border-top"></view>
			
			<view class="d-flex j-sb a-center p-2">
				<view class="font-md">购买数量:</view>
				<uni-number-box :min="1" :max="99" v-model="num"></uni-number-box>
			</view>
			
			<uni-goods-nav class="goods_nav"  :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
			
			<divider></divider>
			
			<view class="py-4">
				<u-parse className="uparse" :content="item.DETAIL"></u-parse>
			</view>
		</block>
	</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	import uParse from "@/components/feng-parse/parse.vue"
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				pid:'',
				good:[],
				num:1,
				options: 
				[
					{
						icon: 'shop',
						text: '店铺',
						infoBackgroundColor:'#007aff',
						infoColor:"red"
					}, {
						icon: 'cart',
						text: '购物车',
					},
				],
				buttonGroup: 
				[
					{
					  text: '加入购物车',
					  backgroundColor: '#ff0000',
					  color: '#fff'
					},
					{
					  text: '立即购买',
					  backgroundColor: '#ffa200',
					  color: '#fff'
					}
				]
			}
		},
		onLoad(e) {
			this.pid = e.PID;
			this.getproduct();
		},
		components: {uniGoodsNav,uParse},
		computed:{
			...mapState({
				token:state=>state.login.tokenx
			})
		},
		methods: {
			getproduct(){
				this.$H.post('/goods/GoodsInfo',{
					goodsId:this.pid
				}).then(res=>{
					this.good = res.msg
				})
			},
			onClick (e) {
				uni.showToast({
				  title: `点击${e.content.text}`,
				  icon: 'none'
				})
			},
		     buttonClick (e) {
				if(e.index === 0){
					this.$H.post('/order/cart',{
						user_id:this.token,
						goods_pid:this.pid,
						goods_count:this.num
					},{
						token:true
					}).then(res=>{
						if(res.code === 200){
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 5000,
								success() {
									uni.switchTab({
										url:'../cart/cart'
									})
								}
							});
							
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.goods{
		padding-bottom: var(--window-bottom);
		.goods_nav {
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 100;
		}
	}
	
	.uparse .img{
		vertical-align: middle;
		width: 100%;
	}
</style>
